<template>
  <div class="subscriptionDetailMain">
    <div class="baseInfoBox">
      <h4 class="withVerticleLineT4 mb10"><b>{{ $t('trackInfo') }}</b></h4>
    </div>
    <div class="subscriptionDetailSearch">
      <a-form ref="subscriptionDetailSearch" class="listSearchWrap table-page-search-wrapper">
        <a-row :gutter="[16,0]">
          <a-col
            :xs="24"
            :sm="24"
            :md="24"
            :lg="24">
            <!-- 激活发起时间 -->
            <a-row :gutter="40">
              <a-col :md="24" :sm="24" :lg="24">
                <a-form-model-item>
                  <div style="display: flex;align-items: center;flex-wrap: wrap">
                    <span style="width: 120px">{{$t('激活发起时间')}}</span>
                    <a-range-picker
                      :show-time="{ format: 'HH:mm:ss' }"
                      format="YYYY/MM/DD"
                      allowClear
                      v-model="activeTime"
                      @change="changeActiveTime"
                      dropdownClassName="rlCls" />
                  </div>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
        <a-row :gutter="[16,0]">
          <a-col
            :xs="24"
            :sm="24"
            :md="8"
            :lg="8">
            <a-form-item :colon="false">
              <a-input v-model.trim="params.operateSn" placeholder="激活流水号" allowClear/>
            </a-form-item>
          </a-col>
          <a-col :span="4" :xs="24" :md="8" :lg="8">
            <a-select
              v-model="params.operateStatus"
              allowClear
              placeholder="激活状态"
            >
              <a-select-option v-for="key in Object.keys(handlerOperateStatus)" :key="key" :value="key">
                {{ handlerOperateStatus[key] }}
              </a-select-option>
            </a-select>
          </a-col>
          <a-col
            :xs="24"
            :sm="24"
            :md="8"
            :lg="8">
            <div class="searchBtns">
              <a-button-group>
                <a-button @click="searchFun">
                  <i class="iconfont icon-chazhao"></i>
                  {{ $t('inquiry') }}
                </a-button>
                <a-button @click="clearFun">
                  <i class="iconfont icon-qingkong"></i>
                  {{ $t('clear') }}
                </a-button>
              </a-button-group>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 服务列表 -->
    <div class="subscriptionDetailTbBox">
      <!--:dataSource="detailData"-->
      <s-table
        ref="table"
        class="h100"
        :columns="columns"
        :data="loadData"
        row-key="id"
      >
        <template
          slot-scope="text"
          v-for="column in commonColumns"
          :slot="column.scopedSlots.customRender"
        >
          <table-ellipsis :text="text" :key="column.dataIndex"></table-ellipsis>
        </template>
        <template #serviceExpireDate="text">
          <table-ellipsis :text="$commonFun.getDateStr(text)"></table-ellipsis>
        </template>
        <template #operationTime="text">
          <table-ellipsis :text="$commonFun.getDateTimeStr(text)"></table-ellipsis>
        </template>
        <template #operateType="text">
          <table-ellipsis :text="$t(text === 0 ? 'powerOnSelfTest' : 'userActivation')"></table-ellipsis>
        </template>
        <template slot="operateStatus" slot-scope="text,record">
          <span v-if="record.serviceStatus == 0">—</span>
          <a-tag v-else :color="![3,7].includes(text) ? '#2bb080' : '#FF8762' ">{{ handlerOperateStatus[text] || '-' }}</a-tag>
        </template>
        <template #operation="text,record">
          <span v-if="record.serviceStatus == 0">—</span>
          <a-spin v-else :spinning="downing">
            <a-icon slot="indicator" type="loading" style="font-size: 16px" spin />
            <a @click="downLoadLog(record)">{{ $t('downLog') }}</a>
          </a-spin>
          <!--<a-spin v-if="record.operateStatus !== 2" :spinning="downing">-->
            <!--<a-icon slot="indicator" type="loading" style="font-size: 16px" spin />-->
            <!--<a @click="downLoadLog(record)">{{ $t('downLog') }}</a>-->
          <!--</a-spin>-->
          <!--<span v-else>-</span>-->
        </template>
      </s-table>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { STable } from '@/components'
import { subscriptionDetailTbColumns } from '../config/list'
import { mapGetters, mapState } from 'vuex'
import subscriptionQueryApi from '@/api/modules/system/subscriptionQuery'
import { downloadBlobFile } from '@/utils/functions'
import AFormItem from 'ant-design-vue/es/form/FormItem'
export default {
  components: {
    AFormItem,
    TableEllipsis,
    STable
  },
  props: {
    info: {
      type: Object,
      default () {
        return {}
      }
    },
    id: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapState({
      activeStateType: (state) => state.serviceConfig.activeStateType
    }),
    ...mapGetters(['drawerOpenTime']),
    commonColumns () {
      return this.columns.filter(item => !item.special)
    }
  },
  mounted(){
    // this.loadData()服务激活记录
  },
  data () {
    return {
      params: {
        operateSn: '',
        operateStatus: undefined,
        activateStartTime: '',
        activateEndTime: '',
      },
      activeTime: [],
      columns: subscriptionDetailTbColumns,
      downing: false,
      handlerOperateStatus: {
        1:'供应商开通中',
        2:'供应商开通成功',
        3:'供应商开通失败',
        4:'写入车辆配置文件成功',
        5:'车辆下载配置文件成功',
        6:'车辆写入配置文件成功',
        7:'车辆持久化配置文件失败超时',
      },
      detailData: [],
    }
  },
  watch: {
    drawerOpenTime: {
      handler () {
        this.refresh()
      },
      immediate: true
    }
  },
  methods: {
    searchFun () {
      this.refresh()
      // this.loadData()
    },
    clearFun () {
      this.params.operateSn = ''
      this.params.operateStatus = undefined
      this.params.activateStartTime = ''
      this.params.activateEndTime = ''
      this.activeTime = []
      this.searchFun()
    },
    changeActiveTime(date, dateString) {
      if (date.length === 0) {
        this.params.activateStartTime = ''
        this.params.activateEndTime = ''
        return false
      }
      this.params.activateStartTime = dateString[0]
      this.params.activateEndTime = dateString[1]
    },
    loadData (parameter={}) {
      const params = { vin: this.info.vin, serviceCode: this.info.serviceCode, ...this.params,...parameter }
      return subscriptionQueryApi.getServiceVehicleDetail(params)
        // .then(res=>{
        //   this.detailData = res.data
        // })
    },
    refresh (refresh = true) {
      this.$refs.table && this.$refs.table.refresh(refresh)
    },
    // 下载日志
    downLoadLog (record) {
      this.downing = true
      subscriptionQueryApi.downloadServiceVehicleLog({ id: record.id }).then(res => {
        downloadBlobFile(res, record.orderNum + 'Log.txt')
      }).finally(() => {
        this.downing = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
  /*.subscriptionDetailSearch{*/
    /*/deep/.ant-form-item-label{*/
      /*width: 108px;*/
    /*}*/
  /*}*/
.subscriptionDetailMain {
  height: 100%;
  display: flex;
  flex-direction: column;
  .baseInfoBox {
    flex:none;
  }
  .subscriptionDetailTbBox {
    flex:1 0 0;
    min-height: 400px;
  }
}
</style>
<style lang="less">
.subscriptionDetailMain {
  .mb10 {
    margin-bottom: 10px;
  }

  .itemDesc {
    margin-bottom: 15px;
  }

  .itemTitle {
    font-weight: 700;
  }

  .itemValue {
    padding-right: 8px;
  }
}
</style>
